<template>
  <div>
    <div class="page-title">升级会员体系</div>
    <div class="tip">选择适合你的会员级别</div>
    <div class="member-box">

      <div class="member-card-box" v-for="(item, index) in dataList" :key="index">
        <div class="card-titlle" :class="[item.level=='1' ? '' : (item.level=='2'?'success':'primary')]">{{item.name}}</div>
        <div class="member-card">
          <div class="card-type" v-if="item.level=='1'">免费版</div>
          <div class="card-type" v-if="item.level=='2'">初级版</div>
          <div class="card-type" v-if="item.level=='3'">高级版</div>
          <div class="card-item" v-for="(desc, index2) in item.descList" :key="index2">{{desc}}</div>
          <div class="btn-box">
            <div class="card-btn" v-if="item.level=='1'" @click="submit(item)">免费注册</div>
            <div class="card-btn" v-else @click="submit(item)">马上升级</div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
  	props: {
  		dataList: {
  			// 动态数据
  			type: Array,
  			required: true,
  			default: function() {
  				return [];
  			}
  		},
  	},
  	data() {
  		return {

  		}
  	},
  	created() {

    },
  	methods: {
  		submit(e) {
        this.$emit('ok',  e);
      },
  	}
  }
</script>

<style lang="scss" scoped>
  .page-title {
    display: flex;
    justify-content: center;
    font-size: 16px;
    color: #303133;
    font-weight: bolder;
  }
  .tip {
    display: flex;
    justify-content: center;
    font-weight: bolder;
    font-size: 12px;
    color: #303133;
    margin: 10px;
  }
  .member-box {
    display: flex;
    justify-content: center;
  }
  .member-card-box {
    margin: 5px;
  }
  .member-card {
    width: 240px;
    border: 1px solid #f8eded;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bolder;
    border-top: 0;
  }
  .member-card-box:hover {
    box-shadow: 5px 5px 10px #888888;
  }
  .card-titlle {
    font-size: 16px;
    background-color: #bebe5c;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: 15px 0;
    color: #fff;
  }
  .card-type {
    font-size: 14px;
    background-color: #f8eded;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    color: #303133;
    padding: 15px 0;
  }
  .card-item {
    font-size: 12px;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    color: #303133;
    padding: 15px 0;
    border-bottom: 1px solid #f8eded;
    height: 50px;
  }
  .btn-box {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    background-color: #f8eded;
    width: 100%;
  }
  .card-btn {
    background-color: #07C160;
    color: #fff;
    font-size: 12px;
    padding: 8px 20px;
    cursor: pointer;
  }
  .success {
    background-color: #07C160;
  }
  .primary {
    background-color: #2979ff;
  }
</style>
